<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>上传音乐</title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery.min.js"></script>
</head>

<body>
<form id="uploadFrom" enctype="multipart/form-data">
    文件上传：<input type="file" name="filename" id="fileInput"/>
    歌手名: <input type="text" name="singer" placeholder="请输入歌手名" id="singerInput"/>
    <input type="submit" value="上传"/><br>
    <a class="btn btn-primary" href="list.html">回到首页</a>
</form>

<script>
    // 当表单提交时
    $('#uploadFrom').on('submit', function (event) {
        event.preventDefault();
        // 创建 FormData 对象, 包含表单数据
        let formData = new FormData(this);

        // 发送 Ajax 请求
        $.ajax({
           url: '/music/upload',
           type: 'POST',
           data: formData,
           processData: false,
           contentType: false,
           success: function (data) {
               if (data.status == -1) {
                   alert(data.message);
                   return;
               }
               alert(data.message);
               location.assign("/list.html")
           },
           error: function () {
               alert("上传音乐失败!");
           }
        });
    });
</script>

</body>

</html>